<template>
  <div>
    <ep-advance-card title="基座应用:ep-front">
      <h4>来自app-1-vue3的数据</h4>
      <ep-form ref="form" :form="form" name-width="100px">
        <ep-form-item label="子应用名称" attr="name">
          <ep-input v-model="form.name"></ep-input>
        </ep-form-item>
        <ep-form-item label="子应用数据" attr="addr">
          <ep-input v-model="form.data"></ep-input>
        </ep-form-item>
        <ep-form-item>
          <ep-button type="primary" @click="commit">提交</ep-button>
          <ep-button type="warning" @click="resetForm">重置</ep-button>
        </ep-form-item>
      </ep-form>
      <h4>来自应用app-2-vue2的数据：</h4>
      <p>name:{{ app2_data.name }}</p>
      <p>age:{{ app2_data.age }}</p>
    </ep-advance-card>
    <ep-divider> </ep-divider>
    <ep-advance-card title="子应用:app-1-vue3">
      <!-- 
      name(必传)：应用名称
      url(必传)：应用地址，会被自动补全为http://localhost:3000/index.html
      baseroute(可选)：基座应用分配给子应用的基础路由，就是上面的 `/child-app`
      data:基座应用向子应用发送数据；只接受对象类型，数据变化时会重新发送
     -->
      <micro-app
        name="app1"
        :url="app1Url"
        baseroute="/child-app/app1"
        :data="userInfo"
        @created="created"
        @beforemount="beforemount"
        @mounted="mounted"
        @unmount="unmount"
        @error="error"
        @datachange="handleDataChange"
      ></micro-app>
    </ep-advance-card>
    <ep-divider> </ep-divider>

    <ep-advance-card title="子应用:app-2-vue2">
      <micro-app name="app2" :url="app2Url" baseroute="/child-app/app2" @datachange="handleApp2DataChange"></micro-app>
    </ep-advance-card>
    <ep-divider> </ep-divider>
    <ep-advance-card title="子应用:app-3-react">
      <micro-app name="app3" :url="app3Url" baseroute="/child-app/app3"></micro-app>
    </ep-advance-card>
    <ep-divider> </ep-divider>
    <ep-advance-card title="应用通信" class="doc">
      <h2>父应用向子应用发送数据:</h2>
      <p>
        1. 通过micro-app 上的data属性:
        <span class="main-cont" v-text="text"></span>
      </p>
      <p>2. 手动发送数据<span class="main-cont"> microApp.setData('应用name',对象类型的数据)；</span>例如microApp.setData('app1',{parentData:123})</p>
      <h2>子应用获取来自父应用的数据:</h2>
      <p>1. 直接获取: <span class="main-cont"> window.microApp.getData();</span></p>
      <p>
        2. 绑定监听函数<span class="main-cont"> window.microApp.addDataListener( dataListener: Function, autoTrigger?: boolean)；</span>
        dataListener:监听函数，autoTrigger:初次绑定监听函数如果有缓存数据，是否主动触发一次，默认false;
      </p>

      <h2>子应用向父应用发送数据:</h2>
      <p>
        通过microApp上的dispath方法:
        <span class="main-cont">window.microApp.dispatch(对象类型的数据)</span>
      </p>
      <h2>父应用获取来自子应用的数据:</h2>
      <p>
        1. 直接获取:
        <span class="main-cont"> microApp.getData(子应用应用名);</span>
      </p>
      <p>2. 监听自定义事件:datachange<span class="main-cont" v-text="text2"></span></p>
      <p>
        3. 绑定监听函数:
        <span class="main-cont"> microApp.addDataListener(appName: string, dataListener: Function, autoTrigger?: boolean)；</span>
        appName:子应用名称，dataListener:监听函数，autoTrigger:初次绑定监听函数如果有缓存数据，是否主动触发一次，默认false;
      </p>
      <h2>全局数据通信:</h2>
      <p>发送全局数据:<span class="main-cont">microApp.setGlobalData(对象类型的数据)</span></p>
      <p>
        获取全局数据:<span class="main-cont">1.microApp.getGlobalData();</span>2.绑定监听函数<span class="main-cont">
          microApp.addGlobalDataListener(dataListener:Function,autoTrigger?:boolean)</span
        >
      </p>
    </ep-advance-card>
  </div>
</template>
<script>
import microApp from '@micro-zoe/micro-app'

export default {
  data() {
    return {
      form: {
        name: '',
        data: ''
      },
      userInfo: {},
      app2_data: {},
      text: "<micro-app :data='dataForChild' />",
      text2: ` <micro-app
              @datachange='handleDataChange'
            />`,
      app1Url: global.CHILDAPP1HOST + '/app-1-vue3/',
      app2Url: global.CHILDAPP2HOST + '/app-2-vue2/',
      app3Url: global.CHILDAPP3HOST + '/app-3-react/'
    }
  },
  mounted() {
    console.log(this.$store.state, global)
    this.userInfo = this.$store.state.app.userMainInfo
    let eptoken = JSON.parse(localStorage.getItem('eptoken')).data
    console.log(eptoken)
    microApp.setGlobalData({ refresh_token: eptoken })
  },
  computed: {
    rules() {
      return {}
    }
  },
  methods: {
    resetForm() {
      this.$refs.form.reset()
    },
    commit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$pop({
            type: 'success',
            message: '验证通过！'
          })
        } else {
          this.$pop({
            type: 'warning',
            message: '验证失败！'
          })
        }
      })
    },
    handleDataChange(e) {
      console.log('来自子应用的数据：', e.detail.data)
      this.form = e.detail.data
    },
    created() {
      console.log('micro-app元素被创建')
    },
    beforemount() {
      console.log('即将被渲染')
    },
    mounted() {
      console.log('已经渲染完成')
      console.log(microApp.getGlobalData())
    },
    unmount() {
      console.log('已经卸载')
    },
    error() {
      console.log('渲染出错')
    },
    handleApp2DataChange() {
      this.app2_data = microApp.getData('app2')
    }
  }
}
</script>
<style scoped lang="less">
.main-app {
  width: 100%;
  height: 300px;
  background: #ccc;
}
.doc {
  h2 {
    color: #49a8f5;
  }
  p {
    margin: 5px 0;
    color: #666;
  }
  span {
    color: orange;
    font-weight: bolder;
  }
}
</style>
